<template>
  <div class="login-page">
    <div class="container">
      <div class="head">
        <Head  :header="headTitle" @change="SwitchComponents" />
      </div>
      <div class="application">
        <RigthRegister v-if="switchRef === 1" @change="updateSwitchRef"/>
        <RightRetrieve v-else-if="switchRef === 3"  @change="updateSwitchRef"/>
        <RigthLogin v-else />
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue"
import RigthLogin from "./RightLoginMy.vue";
import RigthRegister from "./RightRegister.vue"
import RightRetrieve from "./RightRetrieve.vue";
import Head from "./RightHead.vue";
const headTitle = ref([
  {id:1,
   title: "注册", 
   select: false
  },
  {
    id:2,
    title: "登录",
    select: true
  },
  {
    id:3,
    title: "找回",
    select: false
  }
])
const copyHeadTitle = [
  {id:1,
   title: "注册", 
   select: false
  },
  {
    id:2,
    title: "登录",
    select: true
  },
  {
    id:3,
    title: "找回",
    select: false
  }
]

const switchRef = ref(2)
// 切换不同组件
function SwitchComponents(id){
  if(switchRef.value === id){
    return
  }
  headTitle.value.forEach(item => {
    if(item.id === id){
      item.select = true
    }
  })
  headTitle.value.filter((item) => item.id !== id).forEach(item => {
    item.select = false
  })
  switchRef.value = id
}


function updateSwitchRef(){
  switchRef.value = 2
  headTitle.value = [...copyHeadTitle]

}
</script>

<style scoped lang="less">
@import "@/styles/mixin.less";
@import "@/styles/var.less";
.login-page {
  width: 100%;
  height: 100%;
  position: relative;
}
.container {
  .self-center();
  width: 70%;
  height: 70%;
  border-radius: 5px;
  background-color: @white;
  opacity: 0.9;
  color: #000;
  .head {
    width: 100%;
    height: 40px;
    font-weight: bold;
    color: @primary;
    position: absolute;
    margin-top: 30px;
  }
  .application{
    width: 100%;
    position: relative;
    height: 100%;
    border: 1px solid blue;
  }
}
</style>